@import './basic-style.scss';
@import './basic-iar-style.scss';

@mixin generate-skin-basic-plv-ui-pc-style($--skin-configs) {
  .pws-pc-image-paste-input-wrapper {
    color: map.get($--skin-configs, 'pc-msg-input:text-color') !important;
    background-color: map.get($--skin-configs, 'pc-msg-input:bg-color') !important;
    .plv-input-paste-image {
      color: inherit;
      background: unset;
      border: none;
      &::-webkit-scrollbar-thumb {
        background-color: map.get($--skin-configs, 'pc-msg-input:scrollbar-color') !important;
      }
      &::before {
        color: map.get($--skin-configs, 'pc-msg-input-placeholder:text-color') !important;
      }
    }
  }
}

/**
 * 生成皮肤的 basic pc 端 样式
 * 规则：pws-pc-*
 */
@mixin generate-skin-basic-pc-style($--skin-configs) {
  .pws-skin-#{map.get($--skin-configs, 'skin-type')} {
    @include generate-skin-basic-style($--skin-configs);
    @include generate-skin-basic-iar-pc-style($--skin-configs);
    @include generate-skin-basic-plv-ui-pc-style($--skin-configs);

    // 直播状态标签
    @each $status, $color in map.get($--skin-configs, 'pc-live-status-tag:color') {
      .pws-pc-live-status-tag-#{$status} {
        color: $color !important;
        border-color: $color !important;
      }
    }

    // ---------- 观看页背景 ---------- //
    .pws-pc-watch-bg {
      @include skin-setup-bg((
        'bg-type': map.get($--skin-configs, 'pc-watch-page:bg-type'),
        'bg-color': map.get($--skin-configs, 'pc-watch-page:bg-color'),
        'bg-image': map.get($--skin-configs, 'pc-watch-page:bg-image'),
      ));
    }

    .pws-pc-sub-pack-up-placeholder {
      color: map.get($--skin-configs, 'pc-sub-pack-up:text-color');
      background-color: map.get($--skin-configs, 'main-tab-body:bg-color');
    }

    // --------- 倒计时 ---------- //
    .pws-pc-count-down-square-item {
      background-color: map.get($--skin-configs, 'pc-count-down-square-item:bg-color') !important;
      .pws-count-down-square-item-count {
        color: map.get($--skin-configs, 'pc-count-down-square-item:text-color') !important;
        border-color: map.get($--skin-configs, 'pc-count-down-square-item:border-color') !important;
      }
      .pws-count-down-square-item-word {
        color: map.get($--skin-configs, 'pc-count-down-square-item-word:text-color') !important;
      }
      &::before,
      &::after {
        background-color: map.get($--skin-configs, 'pc-count-down-square-item-dot:bg-color') !important;
      }
    }

    // 聊天消息底部输入框层
    .pws-pc-msg-bottom-input-wrap {
      background-color: map.get($--skin-configs, 'pc-msg-bottom-input-wrap:bg-color') !important;
    }
    .pws-pc-msg-bottom-input-wrap-item {
      color: map.get($--skin-configs, 'pc-msg-bottom-input-wrap-item:text-color') !important;
      &:not(.is-disabled):hover {
        color: map.get($--skin-configs, 'pc-msg-bottom-input-wrap-item--hover:text-color') !important;
      }
    }
    .pws-pc-msg-input-limit {
      color: map.get($--skin-configs, 'pc-msg-bottom-input-wrap-item:text-color') !important;;
    }

    // ---------- 聊天消息输入框 ---------- //
    .pws-pc-chat-msg-input {
      background-color: map.get($--skin-configs, 'pc-msg-input:bg-color') !important;
    }
    .pws-pc-chat-msg-input-textarea {
      color: map.get($--skin-configs, 'pc-msg-input:text-color') !important;
      &::placeholder {
        color: map.get($--skin-configs, 'pc-msg-input-placeholder:text-color') !important;
      }
      &::-webkit-scrollbar-thumb {
        background-color: map.get($--skin-configs, 'pc-msg-input:scrollbar-color') !important;
      }
    }

    // ---------- 聊天消息发送按钮 ---------- //
    .pws-pc-msg-send-button {
      color: map.get($--skin-configs, 'pc-msg-send-button:text-color') !important;
      background-color: map.get($--skin-configs, 'pc-msg-send-button:bg-color') !important;
      &.is-disabled {
        color: map.get($--skin-configs, 'pc-msg-send-button--disabled:text-color') !important;
        background-color: map.get($--skin-configs, 'pc-msg-send-button--disabled:bg-color') !important;
      }
    }

    // ------------ 图片达到最大数量后的提示框  ----------- //
    .pws-pc-msg-input-popper__max-image-tips {
      color: map.get($--skin-configs, 'pws-pc-msg-input-popper__max-image-tips:text-color') !important;
      background-color: map.get($--skin-configs, 'pws-pc-msg-input-popper__max-image-tips:bg-color') !important;
    }

    // ---------- 设置昵称占位层 ---------- //
    .pws-pc-set-nick-placeholder {
      color: map.get($--skin-configs, 'pc-set-nick-placeholder:text-color') !important;
      background-color: map.get($--skin-configs, 'pc-set-nick-placeholder:bg-color') !important;
    }
    .pws-pc-set-nick-placeholder-highlight {
      color: map.get($--skin-configs, 'pc-set-nick-placeholder-highlight:text-color') !important;
    }

    // ---------- 表情选择 ---------- //
    .pws-pc-emotion-panel {
      background-color: map.get($--skin-configs, 'pc-emotion-panel:bg-color') !important;
    }
    .pws-pc-emotion-panel-scrollbar {
      &::-webkit-scrollbar-thumb {
        background-color: map.get($--skin-configs, 'panel-scrollbar-color') !important;
      }
    }
    .pws-pc-emotion-panel-type-tab {
      background-color: map.get($--skin-configs, 'pc-emotion-panel-select:bg-color') !important;

      .is-active {
        background-color: map.get($--skin-configs, 'pc-emotion-panel:bg-color') !important;
      }
    }

    // ---------- 更多面板 ---------- //
    .pws-pc-more-panel {
      background-color: map.get($--skin-configs, 'pc-more-panel:bg-color') !important;

      .pws-pc-checkbox.is-checked {
        .pws-pc-checkbox-inner {
          background-color: map.get($--skin-configs, 'pc-more-panel-checkbox--checked:bg-color') !important;
        }
        .pws-pc-checkbox-inner-icon {
          color: map.get($--skin-configs, 'pc-more-panel-checkbox-icon--checked:text-color') !important;
        }
      }
    }
    .pws-pc-more-panel-item {
      color: map.get($--skin-configs, 'pc-more-panel:text-color') !important;
      &:hover {
        color: map.get($--skin-configs, 'pc-more-panel-text--hover:text-color') !important;
      }
    }

    // ---------- 中奖记录 ---------- //
    .pws-pc-lottery-record {
      background-color: map.get($--skin-configs, 'pc-lottery-record-panel:bg-color') !important;
    }
    .pws-pc-lottery-record-scrollbar {
      &::-webkit-scrollbar-thumb {
        background-color: map.get($--skin-configs, 'panel-scrollbar-color') !important;
      }
    }
    .pws-pc-lottery-record-close-icon {
      color: map.get($--skin-configs, 'pc-lottery-record-close:text-color') !important;
    }

    // ---------- 打赏 ---------- //
    .pws-pc-donate-panel {
      background-color: map.get($--skin-configs, 'pc-donate-panel:bg-color') !important;
    }
    .pws-pc-donate-panel-scrollbar {
      &::-webkit-scrollbar-thumb {
        background-color: map.get($--skin-configs, 'panel-scrollbar-color') !important;
      }
    }
    .pws-pc-donate-good-item:hover {
      background-color: map.get($--skin-configs, 'pc-donate-good--hover:bg-color') !important;
      border-color: map.get($--skin-configs, 'pc-donate-good--hover:border-color');
    }
    .pws-pc-donate-good-name {
      color: map.get($--skin-configs, 'pc-donate-good-name:text-color') !important;
    }
    .pws-pc-donate-good-price {
      color: map.get($--skin-configs, 'pc-donate-good-price:text-color') !important;
    }

    // -------- 连麦 -------- //
    .pws-pc-connect-mic-desc-icon {
      color: map.get($--skin-configs, 'pc-connect-mic-desc-icon:text-color') !important;
    }
    .pws-pc-connect-mic-desc-text {
      color: map.get($--skin-configs, 'pc-connect-mic-desc:text-color') !important;
    }
    .pws-pc-connect-mic-button {
      color: map.get($--skin-configs, 'pc-connect-mic-button:text-color') !important;
      background-color: map.get($--skin-configs, 'pc-connect-mic-button:bg-color') !important;
    }
    .pws-pc-connect-mic-button-highlight-text {
      color: map.get($--skin-configs, 'pc-connect-mic-button-highlight:text-color') !important;
    }
    .pws-pc-connect-mic-applying-icon {
      background-image: url(map.get($--skin-configs, 'pc-connect-mic-applying:icon-image')) !important;
    }

    // -------- 回放列表 -------- //
    .pws-pc-playback-list-playing {
      background-color: map.get($--skin-configs, 'pc-playback-list-playing:bg-color') !important;
    }
  }
}
